import { Breadcrumb, Select, Input } from 'antd'
import { Table, Popconfirm, Button, Modal, Form, Switch } from 'antd';
import React from 'react';
import { useState } from 'react';
const { Option } = Select;
import '../../assets/styles/YbargainList.less'
import { instance } from '../../../../api/request'


const { Search } = Input;
export default function seckill() {
    const [dataSource, setdataSource] = useState([])
    const [dataSourceName, setdataSourceName] = useState([])
    const subValut: any = React.createRef()
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [arr,setarr]=useState([])
    const [recode,setrecode]=useState({})
    React.useEffect((): any => {


        findDate()
    }, [])
    async function findDate() {
        const res = await instance.get('/bargainList/findBoth')
    
        var datarr: any = []
        console.log(res);
        
        res.data.forEach((item: any, index: any) => {
 
            
           let bargaiSurplus=item.bargainNum-item.succeedNum
            const eachObj = {
                id: item.id,
                designation: item.designation,
                surfaceplot: item.surfaceplot,
                bargainNum: item.bargainNum,
                limitNum: item.limitNum,
                joinNum: item.joinNum,
                helpNum: item.helpNum,
                surplus: item.surplus,
                succeedNum: item.succeedNum,
                startTime:item.time,
                state: item.state,
                pid: item.pid,
                sid: item.sid, 
                seckillPrice: item.seckillPrice,
                costprice: item.costprice,
                inventory: item.inventory,
                bargaiSurplus:bargaiSurplus,
                price:item.price
            }
            datarr.push(eachObj)


        })
        datarr.forEach((ite: any, index: any) => {
            ite.key = index
        })
        setarr(datarr)
        setdataSource(datarr)

    }
 
    function del(record: any) {
        console.log(record, 1111);

    }

    async function showModal(record:any) {
        const res=await instance.post('/bargainList/name',record)
        res.data.forEach((ite: any, index: any) => {
            ite.key = index
        })
        setdataSourceName(res.data)
        
        setIsModalVisible(true);
    }

    function handleCancel() {
        setIsModalVisible(false)
    }

    function onFinish() {


        console.log(subValut.current.getFieldsValue());

        setIsModalVisible(false);
    }
    //改变状态
    function onChanges(checked: any) {
        console.log(checked, 99999);

    }
   
    function off(){
       
        
        
        setIsModalVisible(false);
    }
    const columnsName:any=[
        {
            title: '用户头像',
            dataIndex: 'username',
            key: 'username',

        },
        {
            title: '用户头像',
            dataIndex: 'img',
            render: (_: any, record: any) => {
                return <>
                    <div style={{ display: 'flex' }}>
                        <img style={{ width: '4rem', height: '4rem', marginRight: '0.5rem' }} src={record.img} />
                    </div>
                </>
            }
        },
        {
            title: '砍价金额',
            dataIndex: 'bargainPrice',
            key: 'bargainPrice',
        },
        {
            title: '砍价时间',
            dataIndex: 'createdAt',
            key: 'createdAt',
        }
    ]
    const columns: any = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',

        },
        {
            title: '砍价图片',
            dataIndex: 'surfaceplot',
            render: (_: any, record: any) => {
                return <>
                    <div style={{ display: 'flex' }}>
                        <img style={{ width: '4rem', height: '4rem', marginRight: '0.5rem' }} src={record.surfaceplot} />
                    </div>
                </>
            }
        },
        {
            title: '砍价商品名称',
            dataIndex: 'designation',
            key: 'designation',
        },
     
        {
            title: '砍价价格',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '总共次数',
            dataIndex: 'bargainNum',
            key: 'bargainNum',
        },
        {
            title: '剩余次数',
            dataIndex: 'bargaiSurplus',
            key: 'bargaiSurplus',
        },
      
        {
            title: '开始-结束',
            dataIndex: 'startTime',
            key: 'startTime',
        },
        {
            title: '砍价状态',
            dataIndex: 'state',
            key: 'state',
            render: () => {

                return <>
                    <Switch defaultChecked onChange={(e) => onChanges(e)} />
                </>
            }
        },
        {
            title: '操作',
            key: '操作',
            render: (_: any, record: any) => {
                return <>
                    <Popconfirm title="您确定要删除吗?" onConfirm={() => del(record)}>
                        <Button type="primary">删除</Button>
                    </Popconfirm>
                    <Button type="primary" onClick={() => showModal(record)}>详情</Button>
                    <Modal  visible={isModalVisible} onCancel={() => handleCancel()} footer={[]}>
                        <Table dataSource={dataSourceName} columns={columnsName} ></Table> 
                        <Button type="primary" onClick={()=>off()}> 关闭</Button>
                    </Modal>
                            
                </>
            }

        },
    ]
    return (

        <div className="Yseckill">
            <div className="top">
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>营销</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/bargainList">砍价列表</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
           
            <div className="bottom">
                <div className="searchbox">
                    <div className="show">
                        <span>是否显示</span>
                        <Select defaultValue="请选择" style={{ width: 120 }} >
                            <Option value="1">关闭</Option>
                            <Option value="2">开启</Option>
                        </Select>
                    </div>
                    <div className="searchName">
                        <div className="secname">秒杀名称</div>
                        <Search placeholder="请输入秒杀名称" enterButton />
                    </div>
                </div>
               
                <Table dataSource={dataSource} columns={columns} ></Table>

            </div>
        </div>
    )
}